import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import React from 'react';
import './index.css'

import { Menu } from './menu';
import Home from './views/Home';

class App extends React.Component {
  render() {
    console.log('props', this.props.children);
    return (
      <BrowserRouter>
        <section className='outBox'>
          <aside>
            <ul className='menuContent'>
              {
                Menu.map((item) => {
                  return (
                    <li key={item.path}>
                      <Link to={item.path} key={item.path}>{item.name}</Link>
                      <ul>
                        {
                          item.children.map((child) => {
                            return (
                              <li key={child.path}>
                                <Link to={child.path}>{child.name}</Link>
                              </li>
                            );
                          })
                        }
                      </ul>
                    </li>
                  );
                })
              }
              </ul>
          </aside>
          <main>
            <Routes>
              {/* <Suspense> */}
                {/* <Switch> */}
                <Route path='/' element={<Home />}>首页</Route>
                {
                  Menu.map((item) => {
                    return (
                      <Route key={item.path} path={item.path} component={item.element}>表单</Route>
                    );
                  })
                }
                {/* </Switch> */}
              {/* </Suspense> */}
            </Routes>
          </main>
        </section>
      </BrowserRouter>
    );
  }
}

export default App;